<!DOCTYPE html>
<html lang="zh-CN" xmlns:http="http://www.w3.org/1999/xhtml">
<head>
    <!-- Required meta tags-->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no, minimal-ui">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <title>PACMAN</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="node_modules/animate.css/animate.min.css">
    <link rel="stylesheet" href="node_modules/normalize.css/normalize.css">
    <link rel="stylesheet" href="css/index.css">
</head>
<body>

<section class="gameContainer step0">
    <!-- 一排礼物 -->
    <div class="map">
        <div class="gift gift1"></div>
        <!--<div class="gift gift2"></div>-->
        <div class="gift gift3"></div>
        <!--<div class="gift gift4"></div>-->
        <div class="gift gift5"></div>
        <div class="pathContainer">
            <div class="path"></div>
            <div class="node node1"></div>
            <div class="node node2"></div>
            <div class="node node3"></div>
            <div class="node node4"></div>
            <div class="node node5"></div>
            <div class="character">
                <div class="pacman">
                    <div class="head"></div>
                    <div class="forehead forehead-animation"></div>
                    <div class="jaw jaw-animation"></div>
                </div>
                <div class="pacman-frontface">

                </div>
            </div>
        </div>
        <div class="numberContainer">
            <div class="num num1">1</div>
            <div class="num num2">2</div>
            <div class="num num3">3</div>
            <div class="num num4">4</div>
            <div class="num num5">5</div>
        </div>
    </div>
    <!-- 一排礼物 -->
    <div class="map">
        <!--<div class="gift gift6"></div>-->
        <div class="gift gift7"></div>
        <!--<div class="gift gift8"></div>-->
        <div class="gift gift9"></div>
        <!--<div class="gift gift10"></div>-->
        <div class="pathContainer">
            <div class="path"></div>
            <div class="node node1"></div>
            <div class="node node2"></div>
            <div class="node node3"></div>
            <div class="node node4"></div>
            <div class="node node5"></div>
        </div>
        <div class="numberContainer">
            <div class="num num6">6</div>
            <div class="num num7">7</div>
            <div class="num num8">8</div>
            <div class="num num9">9</div>
            <div class="num num10">10</div>
        </div>
    </div>
    <!-- 一排礼物 -->
    <div class="map">
        <div class="gift gift11"></div>
        <!--<div class="gift gift12"></div>-->
        <div class="gift gift13"></div>
        <!--<div class="gift gift14"></div>-->
        <div class="gift gift15"></div>
        <div class="pathContainer">
            <div class="path"></div>
            <div class="node node1"></div>
            <div class="node node2"></div>
            <div class="node node3"></div>
            <div class="node node4"></div>
            <div class="node node5"></div>
        </div>
        <div class="numberContainer">
            <div class="num num11">11</div>
            <!--<div class="num num12">12</div>-->
            <div class="num num13">13</div>
            <!--<div class="num num14">14</div>-->
            <div class="num num15">15</div>
        </div>
    </div>
</section>

<section class="giftContainer J_giftContainer">

    <div class="giftBox">
        <div class="wrapper">
            <h4 class="giftTitle">您已获得礼品</h4>

            <div class="giftPhoto" style="background-image: url(http://p0.55tuanimg.com/static/goods/ckeditor/2013/02/04/17/ckeditor_1359971186_8668_wm.jpg)">
            </div>
            <div class="giftName">橙汁</div>
            <div class="giftDesc">柑橘类果汁，特别是橙汁中的黄酮能有效抑制乳腺癌、肺癌等细胞的增生。经常饮用橙汁也可以有效预防某些慢性疾病、维持心肌功能以及降低血压。研究显示，每天喝3杯橙汁可以增加体内高密度脂蛋白（HDL）的含量，从而降低患心脏病的可能。此外，在服药期间吃一些橙子或饮橙汁，可增加机体对药物的吸收量，从而使药效加倍。</div>
        </div>
    </div>

    <div class="split">
        <div class="bg">
            <div class="dash"></div>
        </div>
    </div>

    <div class="redeemCode">
        <div class="wrapper">
            <div class="noCode">
                输入信息 当场领取礼品
            </div>
            <div class="codeGet">
                <span class="name">兑换码:</span>
                <span class="code">382950</span>
            </div>
        </div>
    </div>

</section>

<section class="formContainer J_formContainer">
    <div class="wrapper">

        <div class="formGetGift">
            <p>不止领取, 还可以记录游戏进度哦!</p>

            <div class="userInput">
                <input type="text" name="userName" class="userName" placeholder="姓名" required>
                <input type="number" name="userMobile" class="userMobile" placeholder="手机号" required>
            </div>
            <button class="button button-3d button-primary button-rounded button-block J_GetGift">领取礼品</button>
        </div>

        <div class="formRate">
            <p>你对今日服务是否满意</p>
            <div class="userInput">
                <a href="javascript:" class="button button-3d button-danger button-rounded J_RateDown">不满意</a>
                <a href="javascript:" class="button button-3d button-primary button-rounded J_RateUp">满意</a>
            </div>
        </div>

    </div>
</section>

<!--<hr/>
<div style="text-align: center;">
    <button class="gotoStep" data-step='0'>0</button>
    <button class="gotoStep" data-step='1'>1</button>
    <button class="gotoStep" data-step='2'>2</button>
    <button class="gotoStep" data-step='3'>3</button>
    <button class="gotoStep" data-step='4'>4</button>
    <button class="gotoStep" data-step='5'>5</button>
</div>-->

<style>
    .gift1 {
        background-image: url(fileupload/1.png);
    }

    .gift3 {
        background-image: url(fileupload/3.png);
    }

    .gift5 {
        background-image: url(fileupload/5.png);
    }

    .gift7 {
        background-image: url(fileupload/7.png);
    }

    .gift9 {
        background-image: url(fileupload/9.png);
    }

    .gift11 {
        background-image: url(fileupload/11.png);
    }

    .gift13 {
        background-image: url(fileupload/13.png);
    }

    .gift15 {
        background-image: url(https://cdn2.iconfinder.com/data/icons/flat-ui-free/200/gift.png);
    }
</style>

<script src="//cdn.bootcss.com/jquery/1.11.3/jquery.min.js"></script>
<script src="js/index.js"></script>
<!--<script src="//cdnjs.cloudflare.com/ajax/libs/gsap/1.18.0/TweenMax.min.js"></script>-->

</body>
</html>